<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      
<script src="./resources/js/jquery.js"></script> 
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=267e27e5ce63a61a2c543d45ad8da156&libraries=services"></script>
<h2>다음 지도 API test</h2>	
<div class="map_wrap">
	<div id="map" style="width:500px;height:420px;"></div>
    <div id="centerAddr"></div>
    <div id="centerCoord">temp</div>
    <div>시작 좌표 - 현재 좌표 간 거리 &nbsp; <input readonly="readonly" id="distance"/>m</div>
</div>
<hr>
<!-- <div id="roadview" style="width:320px;height:240px;"></div> -->
 	<table border="1">
 		<tr>
 			<th>키워드 검색</th><th>주소이동</th>
    	</tr>
    	<tr>
    		<td>
    			<input type="text" id="s_keyword"/> <button onclick="searchBykeyword()">검색</button>
    		</td>
		    <td>
    			<input type="text" id="s_addr"/> <button onclick="setByAddr()">이동</button>
    		</td>
    	</tr>
	</table>
<p>
	<button onclick="setBounds()">지도 범위 재설정 하기</button>
	<br>

    <input type="checkbox" id="chkTerrain" onclick="setOverlayMapTypeId()" /> 지형정보 보기 
    <input type="checkbox" id="chkTraffic" onclick="setOverlayMapTypeId()" /> 교통정보 보기       
    <input type="checkbox" id="chkBicycle" onclick="setOverlayMapTypeId()" /> 자전거도로 정보 보기
    <input type="checkbox" id="chkRoadview" onclick="setOverlayMapTypeId()" /> 로드뷰 지형 보기
    <br>
<!--     <button onclick="setRoadview()">로드뷰 보기</button> -->
   
</p>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(37.5010226, 127.0396037), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

//지도 타입 컨트롤
var mapTypeControl = new daum.maps.MapTypeControl();

//지도 타입 컨트롤을 지도에 표시합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

var zoomControl = new daum.maps.ZoomControl();

map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

// 지도 타입 정보를 가지고 있을 객체입니다
// map.addOverlayMapTypeId 함수로 추가된 지도 타입은
// 가장 나중에 추가된 지도 타입이 가장 앞에 표시됩니다
// 이 예제에서는 지도 타입을 추가할 때 지형정보, 교통정보, 자전거도로 정보 순으로 추가하므로
// 자전거 도로 정보가 가장 앞에 표시됩니다
var mapTypes = {
    terrain : daum.maps.MapTypeId.TERRAIN,    
    traffic :  daum.maps.MapTypeId.TRAFFIC,
    bicycle : daum.maps.MapTypeId.BICYCLE,
    roadview : daum.maps.MapTypeId.ROADVIEW 
};

// 검색 테스팅
var infowindow = new daum.maps.InfoWindow({zIndex:1});
var ps = new daum.maps.services.Places(); 

// 체크 박스를 선택하면 호출되는 함수입니다
function setOverlayMapTypeId() {
    var chkTerrain = document.getElementById('chkTerrain'),  
        chkTraffic = document.getElementById('chkTraffic'),
        chkBicycle = document.getElementById('chkBicycle');
    	chkRoadview = document.getElementById('chkRoadview');
    
    // 지도 타입을 제거합니다
    for (var type in mapTypes) {
        map.removeOverlayMapTypeId(mapTypes[type]);    
    }
    
    // 지형정보 체크박스가 체크되어있으면 지도에 지형정보 지도타입을 추가합니다
    if (chkTerrain.checked) {
        map.addOverlayMapTypeId(mapTypes.terrain);    
    }
    
    // 교통정보 체크박스가 체크되어있으면 지도에 교통정보 지도타입을 추가합니다
    if (chkTraffic.checked) {
        map.addOverlayMapTypeId(mapTypes.traffic);    
    }
    
    // 자전거도로정보 체크박스가 체크되어있으면 지도에 자전거도로정보 지도타입을 추가합니다
    if (chkBicycle.checked) {
        map.addOverlayMapTypeId(mapTypes.bicycle);    
    }
    if (chkRoadview.checked) {
        map.addOverlayMapTypeId(mapTypes.roadview);
    }
} 

/* function setRoadview() {
	
	
	var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
	var roadview = new daum.maps.Roadview(roadviewContainer); //로드뷰 객체
	var roadviewClient = new daum.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

	var position = new daum.maps.LatLng(37.497942,127.027621);
	
	roadviewClient.getNearestPanoId(position, 50, function(panoId) {
	    roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
	});
	
} */

function searchBykeyword()
{
	var keyword = $('#s_keyword').val();
	
	ps.keywordSearch(keyword, placesSearchCB);
	
}

function placesSearchCB (status, data, pagination) {
    if (status == daum.maps.services.Status.OK) {

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        var bounds = new daum.maps.LatLngBounds();

        for (var i=0; i<data.places.length; i++) {
            displayMarker(data.places[i]);    
            bounds.extend(new daum.maps.LatLng(data.places[i].latitude, data.places[i].longitude));
        }       

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
    //    map.setBounds(bounds);
    } 
}

function displayMarker(place) {
    
    // 마커를 생성하고 지도에 표시합니다
    var marker = new daum.maps.Marker({
        map: map,
        position: new daum.maps.LatLng(place.latitude, place.longitude) 
    });

    // 마커에 클릭이벤트를 등록합니다
    daum.maps.event.addListener(marker, 'click', function() {
        // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
        infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.title + '</div>');
        infowindow.open(map, marker);
    });
}

var g_bounds = new daum.maps.LatLngBounds();

g_bounds.extend(new daum.maps.LatLng(37.5010226, 127.0396037));


function setBounds() {
    // LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
    // 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
    
    
    //var c_Level = map.getLevel();
    
    map.setBounds(g_bounds);
    
    map.setLevel(3);
}

//좌표 변환
var geocoder = new daum.maps.services.Geocoder();

var marker = new daum.maps.Marker({}), // 클릭한 위치를 표시할 마커입니다
    infowindow = new daum.maps.InfoWindow({zindex:1}); // 클릭한 위치에 대한 주소를 표시할 인포윈도우입니다

// 현재 지도 중심좌표로 주소를 검색해서 지도 좌측 상단에 표시합니다
searchAddrFromCoords(map.getCenter(), displayCenterInfo);

// 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보를 표시하도록 이벤트를 등록합니다
/* daum.maps.event.addListener(map, 'click', function(mouseEvent) {

    searchAddrFromCoords(mouseEvent.latLng, function(status, result) {
        if (status === daum.maps.services.Status.OK) {
            var content = '<div style="padding:5px;">' + result[0].fullName + '</div>';

            marker.setPosition(mouseEvent.latLng);
            marker.setMap(map);
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }   
    });
}); */

// 중심 좌표나 확대 수준이 변경됐을 때 지도 중심 좌표에 대한 주소 정보를 표시하도록 이벤트를 등록합니다
daum.maps.event.addListener(map, 'idle', function() {
    searchAddrFromCoords(map.getCenter(), displayCenterInfo);
    
});

function searchAddrFromCoords(coords, callback) {
    // 좌표로 주소 정보를 요청합니다
    geocoder.coord2addr(coords, callback);         
}

// 지도 좌측상단에 지도 중심좌표에 대한 주소정보를 표출하는 함수입니다
function displayCenterInfo(status, result) {
    if (status === daum.maps.services.Status.OK) {
        var infoDiv = document.getElementById('centerAddr');
        infoDiv.innerHTML = result[0].fullName;
        
       	// 거리 구하는 함수 호출
        getCdist();
    }    
}

function setByAddr()
{
 	var addr = $('#s_addr').val();
  
	//alert(addr);
	
	geocoder.addr2coord(addr, function(status, result) {

	    // 정상적으로 검색이 완료됐으면 
	     if (status === daum.maps.services.Status.OK) {

	        var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
 
 	        //이동
	        var m_pt = new daum.maps.LatLngBounds();

 	        //map.setCenter(m_pt);
 	        
	        m_pt.extend(new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng));
	        
	        map.setBounds(m_pt);
	        
	        map.setLevel(3);
	        
	        // 결과값으로 받은 위치를 마커로 표시합니다
			/*  var marker = new daum.maps.Marker({
	            map: map,
	            position: coords

	        }); */
	    } 
	});
		
}


var polyline =  new daum.maps.Polyline({
    map: map,
    path: [
        new daum.maps.LatLng(37.5010226, 127.0396037),
        map.getCenter()
    ],
    strokeWeight: 2,
    strokeOpacity: 0.8,
    strokeStyle: 'dashed'
    
     
	});

// 지도 기본 좌표 - 현재 맵 가운데 좌표 간 거리
function getCdist()
{

	 
    var newpath = [
                   new daum.maps.LatLng(37.5010226, 127.0396037),
                   map.getCenter() 
                 
               ];
     
    polyline.setPath(newpath); 

   polyline.setMap(map);
    
   var c_Coord = 123;
   
    // 선 길이를 미터로 반환하여 표시
    document.getElementById('distance').value = Math.round(polyline.getLength());
    
    document.getElementById('centerCoord').innerHTML =  map.getCenter().getLat() +","+map.getCenter().getLng();
     
}


</script>
